<HTML><HEAD>
<!--
-----------
Color Maker
-----------
-->
<SCRIPT LANGUAGE="JavaScript"><!-- hide from old browsers
/*
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
Copyright (c)2000 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun nor
Charles River Media will be held responsible for any unwanted effects
due to the use of this applet or any derivative.
*/
// --------------------Hexadecimal Conversion---------------------
// convert a single digit (0 - 16) into hex
function enHex(aDigit)
{
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
}
// convert a hex digit into decimal
function deHex(aDigit)
{
return("0123456789ABCDEF".indexOf(aDigit))
}
// Convert a 24bit number to hex
function toHex(n)
{
return (enHex((0xf00000 & n) >> 20) +
enHex((0x0f0000 & n) >> 16) +
enHex((0x00f000 & n) >> 12) +
enHex((0x000f00 & n) >> 8) +
enHex((0x0000f0 & n) >> 4) +
enHex((0x00000f & n) >> 0))
}
// Convert a six character hex to decimal
function toDecimal(hexNum)
{
var tmp = ""+hexNum.toUpperCase()
while (tmp.length < 6) tmp = "0"+tmp
return ((deHex(tmp.substring(0,1)) << 20) +
(deHex(tmp.substring(1,2)) << 16) +
(deHex(tmp.substring(2,3)) << 12) +
(deHex(tmp.substring(3,4)) << 8) +
(deHex(tmp.substring(4,5)) << 4) +
(deHex(tmp.substring(5,6))))
}
// --------------------JSCcolor Object---------------------
// Returns a JavaScript integer representing a JSCcolor object's color
function rawColor()
{
return (this.red << 16) + (this.green << 8) + this.blue
}
// Returns a hex string representing a JSCcolor object's color
function hexColor()
{
return toHex(this.rawColor())
}
// Set the JSCcolor object's color to that in a hex string.
// This routine does not add the Ox prefix.
function setColor(aString)
{
var tmp = toDecimal(aString)
this.red = (0xff0000 & tmp) >> 16
this.green = (0xff00 & tmp) >> 8
this.blue = (0xff & tmp)
return this
}
// Set the JSCcolor object's color to an integer
function setDecimalColor(aNumber)
{
var tmp = toHex(aNumber)
this.red = eval('0x'+tmp.substring(0,2))
this.green = eval('0x'+tmp.substring(2,4))
this.blue = eval('0x'+tmp.substring(4,8))
return this
}
// Adjust a JSCcolor object's color (red, green or blue) by an offset
function adjustColor(aColor, anOffset)
{
this[aColor] += anOffset
if (this[aColor] > 0xff) this[aColor] = 0xff
if (this[aColor] < 0x0) this[aColor] = 0x0
}
// Adjust one or more of a JSCcolor object's colors by an offset
function adjustColors(colString, anOffset)
{
var cs = colString.toUpperCase()
if (cs.indexOf('R') != -1) this.adjustColor('red', anOffset)
if (cs.indexOf('G') != -1) this.adjustColor('green', anOffset)
if (cs.indexOf('B') != -1) this.adjustColor('blue', anOffset)
}
// JSCcolor object constructor
function JSCcolor(r, g, b)
{
// set properties
this.red = r
this.green = g
this.blue = b
// set methods
this.rawColor = rawColor
this.hexColor = hexColor
this.adjustColor = adjustColor
this.adjustColors = adjustColors
this.setColor = setColor
this.setDecimalColor = setDecimalColor
return this
}
// This JSCcolor object will store our current color
var myColor = new JSCcolor(0x80, 0x80, 0x80)
// --------------------DEMONSTRATION UTILITIES---------------------
// Convert arrow presses to actual color changes
function doAdjust(aColor, anOffset)
{
myColor.adjustColor(aColor, anOffset)
parent.JCcolorView.document.bgColor = myColor.hexColor()
document.forms[0].CURCOL.value=myColor.hexColor()
}
// Request a change via the text entry field
function setLineColor()
{
var tmp = document.forms[0].CURCOL.value
myColor.setColor(tmp)
parent.JCcolorView.document.bgColor = myColor.hexColor()
}
<!-- done hiding --></SCRIPT></HEAD>
<BODY BGCOLOR="FFFFFF" LINK="007777" VLINK="007777" ALINK="00FFFF">
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = LEFT>Color Setter</H1></FONT>
<FONT COLOR="770000"><h2>Design a Color</h2></FONT>
<IMG SRC="../GRAFX/ARROWS.GIF" width=164
height=101 usemap="#map" border=0 align=right><MAP name="map">
<AREA SHAPE=rect HREF="javascript:doAdjust('blue', 0x10)" COORDS="116, 3, 153,27">
<AREA SHAPE=rect HREF="javascript:doAdjust('blue', 0x01)" COORDS="116,28, 153,47">
<AREA SHAPE=rect HREF="javascript:doAdjust('blue', -0x01)" COORDS="116,48, 153,69">
<AREA SHAPE=rect HREF="javascript:doAdjust('blue', -0x10)" COORDS="116,70, 153,97">
<AREA SHAPE=rect HREF="javascript:doAdjust('green', 0x10)" COORDS="62, 3, 97,27">
<AREA SHAPE=rect HREF="javascript:doAdjust('green', 0x01)" COORDS="62,28, 97,47">
<AREA SHAPE=rect HREF="javascript:doAdjust('green', -0x01)" COORDS="62,48, 97,69">
<AREA SHAPE=rect HREF="javascript:doAdjust('green', -0x10)" COORDS="62,70, 97,97">
<AREA SHAPE=rect HREF="javascript:doAdjust('red', 0x10)" COORDS="10, 3, 44,27">
<AREA SHAPE=rect HREF="javascript:doAdjust('red', 0x01)" COORDS="10,28, 44,47">
<AREA SHAPE=rect HREF="javascript:doAdjust('red', -0x01)" COORDS="10,48, 44,69">
<AREA SHAPE=rect HREF="javascript:doAdjust('red', -0x10)" COORDS="10,70, 44,97">
</MAP>
<FONT SIZE=4>
<FORM onSubmit="setLineColor();return false">
<b>Bottom Window Color:</b>
<INPUT TYPE="TEXT" NAME="CURCOL" SIZE=6 VALUE="808080">
</FORM>
<br>
The arrows to the right will let you adjust the bottom window's color
by varying the amount of red, green and blue in the color.
The text entry field shows the hexadecimal representation of this color.<p>
If you wish, you can type a hex number directly into the box to set
the color. Press
return and the bottom window's color will update to this new color.<p>
Use this utility to help you design
colors for your document, fonts or links.<p>
<b>The JSCcolor Object</b>. This example uses the JavaScript Cookbook's
custom color object. This object stores red, green and blue values
for a color, allows you to adjust that color up and down and access the
colors in either hex or decimal format. The applet uses this color to
set the tint of the bottom frame's background color.
<PRE><FONT COLOR="770000" SIZE=3>
// --------------------JSCcolor Object---------------------
// JSCcolor object constructor
function JSCcolor(r, g, b)
{
// set properties
this.red = r
this.green = g
this.blue = b
// set methods
this.rawColor = rawColor
this.hexColor = hexColor
this.adjustColor = adjustColor
this.adjustColors = adjustColors
this.setColor = setColor
this.setDecimalColor = setDecimalColor
return this
}
// This JSCcolor object will store our current color
var myColor = new JSCcolor(0x80, 0x80, 0x80)
</FONT></PRE>
</FONT>
<h5>Copyright ©1996 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>